<template>
  <div style="padding: 20px 0; border: 1px solid #f0eeee">
    <div class="title">
      <el-divider direction="vertical" />
      订单管理 - 订单统计
    </div>

    <div class="item-title">
      <span style="margin-left: 20px">消费报表金额(日)</span>
      <span style="margin-left: 20px">选择月份：</span>

      <span
        ><el-date-picker
          @change="monthChange()"
          v-model="currentYM"
          type="month"
          placeholder="请选择月份"
      /></span>
      <div style="margin-left: 80px; display: inline-block">
        <span>{{ currentYM }}月总计消费次数：</span>
        <span :style="dayConsumCount >= 10 ? 'color:red' : 'color:blue'">
          {{ dayConsumCount }}次 </span
        >，
        <span>消费总额：</span>
        <span :style="dayConsumMoney >= 1000 ? 'color:red' : 'color:blue'">
          {{ dayConsumMoney }}元
        </span>
      </div>
    </div>
    <div id="mainDay" style="height: 300px"></div>
    <div class="item-title">
      <span style="margin-left: 20px">消费报表金额(月)</span>
      <span style="margin-left: 20px">选择年份：</span>
      <span
        ><el-date-picker
          v-model="currentY"
          type="year"
          placeholder="请选择年份"
          @change="changeYear()"
          format="YYYY"
          value-format="YYYY"
      /></span>
      <div style="margin-left: 80px; display: inline-block">
        <span>{{ currentY }}年总计消费次数：</span>
        <span :style="monthConsumCount >= 360 ? 'color:red' : 'color:blue'">
          {{ monthConsumCount }}次
        </span>
        <span>消费总额：</span>
        <span :style="monthConsumMoney >= 1500 ? 'color:red' : 'color:blue'">
          {{ monthConsumMoney }}元
        </span>
      </div>
    </div>
    <div id="mainMonth" style="height: 300px"></div>
  </div>
</template>
  
  <script>
import { onMounted, reactive, ref, toRef, toRefs, watch } from "vue";
import * as echarts from "echarts";
import { ymOrders, monthOrders } from "@/api/order";
import { YYMM } from "@/utils/timeConversion";
export default {
  name: "orderCount",
  setup() {
    let data = reactive({
      userId: JSON.parse(localStorage.getItem("userInfo")).id,
      currentY: new Date().getFullYear().toString(),
      currentYM:
        new Date().getFullYear() + "-" + new Date().toISOString().slice(5, 7),
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      dayCount: [],
      dayMoney: [],
      orderYear: "",
      dayList: [],
      monthCount: [],
      monthMoney: [],
      monthConsumMoney: 0,
      monthConsumCount: 0,
      dayConsumMoney: 0,
      dayConsumCount: 0,
    });

    let currentMonth = () => {
      data.days = 0;
      data.dayList =[] ;
      if (
        data.currentYM !=
        new Date().getFullYear() + "-" + new Date().toISOString().slice(5, 7)
      ) {
        data.currentYM = YYMM(data.currentYM);
      }
      let days = new Date(data.currentYear, data.currentMonth, 0).getDate();
      for (let i = 1; i <= days; i++) {
        data.dayList.push(i + "日");
      }
      console.log(data.dayList)
      let dayParams = {
        userId: data.userId,
        orderTime: data.currentYM,
      };
      data.dayCount.length = data.dayList.length;
      data.dayMoney.length = data.dayList.length;
      data.dayCount.fill("-");
      data.dayMoney.fill("-");

      ymOrders(dayParams).then((res) => {
        if (!Object.keys(res.data).length == 0) {
          res.data.day.forEach((item, index) => {
            data.dayCount[item - 1] = res.data.count[index];
            data.dayMoney[item - 1] = res.data.money[index];
          });

          res.data.count.forEach((item, index) => {
            data.dayConsumCount += item;
          });
          res.data.money.forEach((item, index) => {
            data.dayConsumMoney += item;
          });
        } else {
          data.dayConsumCount = 0;
          data.dayConsumMoney = 0;
        }
      });
      console.log(data.currentYM);
     
    };

    //当前年
    let currentYear = () => {
      let monthParams = {
        userId: data.userId,
        orderMonth: data.currentY,
      };
      data.monthCount.length = 12;
      data.monthMoney.length = 12;
      data.monthCount.fill("-");
      data.monthMoney.fill("-");

      monthOrders(monthParams).then((res) => {
        if (!Object.keys(res.data).length == 0) {
          res.data.month.forEach((item, index) => {
            data.monthCount[item - 1] = res.data.count[index];
            data.monthMoney[item - 1] = res.data.money[index];
          });
          res.data.count.forEach((item, index) => {
            data.monthConsumCount += item;
          });
          res.data.money.forEach((item, index) => {
            data.monthConsumMoney += item;
          });
        } else {
          data.monthConsumCount = 0;
          data.monthConsumMoney = 0;
        }
      });
    };

    //更换日期
    let monthChange = () => {
      data.currentYear=data.currentYM.getFullYear()
      data.currentMonth=data.currentYM.toISOString().slice(5, 7)
      currentMonth();
      monthTb();
    };

    //更换年
    let changeYear = () => {
      currentYear();
      yearTb();
    };

    //月图表
    let monthTb = () => {
      setTimeout(() => {
        echarts.init(document.getElementById("mainDay")).setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["消费金额(元)", "外卖次数/天"],
          },
          xAxis: [
            {
              type: "category",
              data: data.dayList,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "消费金额(元)",
              min: 0,
              max: 250,
              interval: 50,
            },
            {
              type: "value",
              name: "外卖次数/天",
              min: 0,
              max: 25,
              interval: 5,
            },
          ],
          series: [
            {
              name: "外卖次数/天",
              type: "line",
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  if (value == "-") {
                    value = 0;
                    return value + " 次";
                  } else {
                    return value + " 次";
                  }
                },
              },
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: data.dayCount,
            },
            {
              name: "消费金额(元)",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  if (value == "-") {
                    value = 0;
                    return value + " 元";
                  } else {
                    return value + " 元";
                  }
                },
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: data.dayMoney,
            },
          ],
        });
      }, 1000);
    };

    //年图表
    let yearTb = () => {
      setTimeout(() => {
        echarts.init(document.getElementById("mainMonth")).setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["消费金额(元)", "外卖次数/月"],
          },
          xAxis: [
            {
              type: "category",
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "消费金额(元)",
              min: 0,
              max: 1500,
              interval: 300,
            },
            {
              type: "value",
              name: "外卖次数/月",
              min: 0,
              max: 60,
              interval: 12,
            },
          ],
          series: [
            {
              name: "外卖次数/月",
              type: "line",
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  if (value == "-") {
                    value = 0;
                    return value + " 次";
                  } else {
                    return value + " 次";
                  }
                },
              },
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: data.monthCount,
            },
            {
              name: "消费金额(元)",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  if (value == "-") {
                    value = 0;
                    return value + " 元";
                  } else {
                    return value + " 元";
                  }
                },
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: data.monthMoney,
            },
          ],
        });
      }, 1000);
    };

    onMounted(() => {
      currentMonth();
      monthTb();
      currentYear();
      yearTb();
    });

    return {
      ...toRefs(data),
      currentMonth,
      monthChange,
      monthTb,
      changeYear,
      currentYear,
      yearTb,
    };
  },
};
</script>
  
  <style scoped>
.title {
  color: #2d8cf0;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 10px 0px;
  line-height: 18px;
  margin-bottom: 20px;
}

.orderStyle {
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid #dbb9b9;
  padding: 15px 0;
  background-color: #f6f7f991;
  border-radius: 8px;
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
}

.title {
  color: #2d8cf0;
  font-weight: 600;
  font-size: 18px;
  margin: 10px 0 20px 0px;
  line-height: 18px;
  margin-bottom: 20px;
}

.el-divider--vertical {
  border-left: 8px #2d8cf0 var(--el-border-style);
}
</style>